

<!-- 发票详情 -->
<template>
	<view class="container">
		
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="发票详情" colorTheme="black">
			</navHeader>
		</view>
		
		
		<!-- 发票信息 -->
		<view class="applyStatus-Container">
			<view class="moneyType">
				<view class="money">
					<text class="icon">￥</text><text class="number">{{invoiceInfo.cidAmount / 100}}</text>
				</view>
				<view class="type">
					{{invoiceInfo.cidType | cidTypeFormate}}
				</view>
			</view>
			<view class="status" :class="{doing: invoiceInfo.cidStatus == 1}">
				{{invoiceInfo.cidStatus | invoiceStatusFormat}}
			</view>
		</view>
		
		<view class="applyInfo-Container">
			<view class="oneRow">
				<view class="columnLabel">
					发票类型
				</view>
				<view class="columnValue">
					<view v-if="invoiceInfo.invoiceDto.ciType == 1">
						<view class="typeName">
							公司
						</view>
					</view>
					<view v-if="invoiceInfo.invoiceDto.ciType == 2">
						<view class="typeName">
							个人或其他
						</view>
					</view>
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			<view class="oneRow">
				<view class="columnLabel">
					发票抬头
				</view>
				<view class="columnValue">
					{{invoiceInfo.invoiceDto.ciTitle}}
				</view>
			</view>
			<view v-if="invoiceInfo.invoiceDto.ciType == 1" class="splitLine borderOneRpx">
			</view>
			<view v-if="invoiceInfo.invoiceDto.ciType == 1" class="oneRow">
				<view class="columnLabel">
					税号
				</view>
				<view class="columnValue">
					{{invoiceInfo.invoiceDto.ciTaxpayerIdentificationNumber}}
				</view>
			</view>
			<view v-if="invoiceInfo.invoiceDto.ciType == 1" class="splitLine borderOneRpx">
			</view>
			
			<block v-if="invoiceInfo.invoiceDto.ciType == 1" class="applyInfo-Container">
				<view class="oneRow">
					<view class="columnLabel">
						企业电话
					</view>
					<view class="columnValue">
						{{invoiceInfo.invoiceDto.ciPhoneNumber || "未填写"}}
					</view>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						注册地址
					</view>
					<view class="columnValue">
						{{invoiceInfo.invoiceDto.ciRegisteredAddress || "未填写"}}
					</view>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						开户银行
					</view>
					<view class="columnValue">
						{{invoiceInfo.invoiceDto.ciBank || "未填写"}}
					</view>
				</view>
				<view class="splitLine borderOneRpx">
				</view>
				
				<view class="oneRow">
					<view class="columnLabel">
						银行账号
					</view>
					<view class="columnValue">
						{{invoiceInfo.invoiceDto.ciBankAccount || "未填写"}}
					</view>
				</view>
			</block>
		</view>	
		
		
		<view class="applyInfo-Container">
			<view class="oneRow">
				<view class="columnLabel">
					收票邮箱
				</view>
				<view class="columnValue">
					{{invoiceInfo.invoiceDto.ciEmail || "未填写"}}
				</view>
			</view>
			<view class="splitLine borderOneRpx">
			</view>
			<view class="oneRow">
				<view class="columnLabel">
					申请时间
				</view>
				<view class="columnValue">
					{{invoiceInfo.cidApplyTime | formatDate}}
				</view>
			</view>
			<view v-if="invoiceInfo.cidOverTime" class="splitLine borderOneRpx">
			</view>
			<view v-if="invoiceInfo.cidOverTime" class="oneRow">
				<view v-if="invoiceInfo.cidStatus == 2" class="columnLabel">
					开票时间
				</view>
				<view v-if="invoiceInfo.cidStatus == 3" class="columnLabel">
					取消时间
				</view>
				<view class="columnValue">
					{{invoiceInfo.cidOverTime | formatDate}}
				</view>
			</view>
		</view>
		
		
		<view v-if="invoiceInfo.cidStatus == 1" @click="cancelApplyHandler()" class="submit-btn">
			取消申请
		</view>
		<view style="height: 10upx;"></view>
	</view>
</template>

<script>
	import {
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		filters: {
			
			// 时间格式化
			formatDate: function(date) {
				
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				
				return YY + MM + DD + ' ' + hh + mm + ss;
			},
			
			//发票状态格式化
			invoiceStatusFormat(status) {
				
				var statusName = "";
				switch(parseInt(status)) {
					case 1:
						statusName = "待开票";
						break;
					case 2:
						statusName = "已开票";
						break;
					case 3:
						statusName = "取消开票";
						break;
				}
				
				return statusName;
			},
			
			
			//发票类型格式化
			cidTypeFormate: function(cidType) {
				var cidTypeName = "";
				switch(parseInt(cidType)) {
					case 1:
						cidTypeName = "普通纸质发票";
						break;
					case 2:
						cidTypeName = "普通电子发票";
						break;
					case 3:
						cidTypeName = "增值税纸质发票";
						break;
					case 4:
						cidTypeName = "增值税电子发票";
						break;
				}
				
				return cidTypeName;
			}
		},
		components: {
			navHeader
		},
		data() {
			return {
				icon: {
				},
				
				invoiceInfo: {}
			}
		},
		computed:{
			...mapState(['hasLogin', 'imgSite']),
		},
		onLoad(options) {
			this.invoiceInfo = JSON.parse(options.invoiceInfo);
		},
		methods: {
			
			//取消申请
			cancelApplyHandler() {
				
				var that = this;
				uni.showModal({
					content: '确认要取消申请发票？',
					confirmText: '确认',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							
							that.$api.globalUtil.requestAjax({
								url: '/customerInvoiceDetailApi/quitInvoiceDetailList',
								method: 'POST',
								data: {
									cidId: that.invoiceInfo.cidId
								},
								success: function(res) {
									that.$api.msg("取消成功");
									setTimeout(function() {
										uni.navigateBack({
										});
									}, 2000);
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #F5F5F5;
	}
	
	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	//发票信息
	.applyStatus-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 40rpx;
		width:690rpx;
		height:172rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		
		.moneyType {
			display: flex;
			flex-direction: column;
			
			.icon {
				font-size: 30rpx;
			}
			.number {
				font-size: 50rpx;
			}
			
			.type {
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.status {
			font-size: 24rpx;
			color: #666666;
			
			&.doing {
				color: #FE5E49;
			}
		}
	}
	//申请类型
	.typeName {
		font-size: 26rpx;
		color: #FE5E49;
	}
	.inputHolder {
		font-size: 26rpx;
		color: #BFBFBF;
	}
	.applyInfo-Container {
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 0 30rpx;
		width: 690rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		
		//一行样式
		.oneRow {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			width: 690rpx;
			height: 96rpx;
			
			.columnLabel {
				width: 200rpx;
				font-size:26rpx;
				font-family:PingFang SC;
				color: #666666;
			}
			.columnValue {
				width: 490rpx;
				text-align: left;
				font-size:26rpx;
				font-family:PingFang SC;
				color: #333333;
			}
		}
		
		//分割线
		.splitLine {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
		}
		.splitLine.borderOneRpx:after {
			border-top: 0;
			border-left: 0;
			border-right: 0;
			border-color: #EDEDED;
		}
	}
	
	
	//取消申请
	.submit-btn {
		margin: 0 auto;
		margin-top: 140rpx;
		margin-bottom: 100rpx;
		width:600rpx;
		height:90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 34rpx;
		color: #FE5E49;
		background:rgba(255,255,255,1);
		border:1px solid #FE5E49;
		border-radius:45rpx;
	}
</style>



